<template>
	<view class="log-list">
		<template v-if="listReal.length">
			<log-item
				class="log-list-item"
				v-for="(item, index) in listReal"
				:key="index"
				:text="item"
				:deletable="deletable"
				@delete="handleDelete"
				@click="handleClick"
			></log-item>
		</template>
		<template v-else>
			<view class="null-content">暂无记录</view>
		</template>
	</view>
</template>

<script>
import LogItem from './log-item.vue';

export default {
	components: { LogItem },
	props: {
		list: {
			type: Array
		},
		deletable: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			listReal: []
		};
	},
	emits: ['click', 'update'],
	watch: {
		list: {
			handler(newVal) {
				this.listReal = newVal;
			},
			immediate: true
		}
	},
	methods: {
		handleDelete(item) {
			this.listReal = this.listReal.filter(i => {
				return i !== item;
			});
			uni.setStorageSync('historyList', this.listReal);
			this.$emit('update');
		},
		handleClick(item) {
			this.$emit('click', item);
		}
	}
};
</script>

<style lang="scss" scoped>
.log-list {
	margin: 3vw -1vw 1vw;
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	&-item {
		margin: 0 1vw 3vw;
	}

	.null-content {
		margin: 0 auto;
		margin-bottom: 3vw;
		font-size: 4vw;
		color: #9a9a9a;
	}
}
</style>
